<template>
  <view class="repair-accept-page">
    <!-- 加载状态 -->
    <view class="loading-section" v-if="loading">
      <u-loading-page :loading="true" loading-text="正在加载工单信息..."></u-loading-page>
    </view>

    <!-- 错误状态 -->
    <view class="error-section" v-else-if="error">
      <u-empty 
        text="工单信息加载失败" 
        :description="error"
        icon="error"
      >
        <template #bottom>
          <u-button 
            type="primary" 
            size="small" 
            text="重新加载" 
            @click="retryLoad"
          />
        </template>
      </u-empty>
    </view>

    <!-- 工单信息展示 -->
    <view v-else-if="orderInfo">
      <!-- 工单状态卡片 -->
      <view class="status-section">
      <view class="status-card">
        <view class="status-header">
          <text class="status-title">{{ orderInfo.title || '维修工单' }}</text>
          <view class="status-tag">
            <u-tag 
              :text="getStatusText(orderInfo.status)" 
              :type="getStatusType(orderInfo.status)" 
              size="mini"
            />
          </view>
        </view>
        <view class="status-desc">{{ getStatusDescription(orderInfo.status) }}</view>
      </view>
    </view>

    <!-- 工单基本信息 -->
    <view class="info-section" v-if="orderInfo">
      <view class="info-card">
        <view class="card-title">基本信息</view>
        <view class="info-list">
          <view class="info-item">
            <view class="info-label">
              <u-icon name="file-text" size="16" color="#666"></u-icon>
              <text>工单编号</text>
            </view>
            <text class="info-value">{{ orderInfo.orderNo }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="tag" size="16" color="#666"></u-icon>
              <text>维修类型</text>
            </view>
            <text class="info-value">{{ orderInfo.repairTypeName || '--' }}</text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="alert-circle" size="16" color="#666"></u-icon>
              <text>紧急程度</text>
            </view>
            <text class="info-value" :style="{ color: getPriorityColor(orderInfo.urgencyLevel) }">
              {{ orderInfo.urgencyLevelName || '--' }}
            </text>
          </view>
          <view class="info-item">
            <view class="info-label">
              <u-icon name="clock" size="16" color="#666"></u-icon>
              <text>创建时间</text>
            </view>
            <text class="info-value">{{ formatTime(orderInfo.createTime) }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 申请人信息 -->
    <view class="applicant-section" v-if="orderInfo && (orderInfo.userName || orderInfo.contactName)">
      <view class="info-card">
        <view class="card-title">申请人信息</view>
        <view class="info-list">
          <view class="info-item" v-if="orderInfo.userName">
            <view class="info-label">
              <u-icon name="user" size="16" color="#666"></u-icon>
              <text>申请人</text>
            </view>
            <text class="info-value">{{ orderInfo.userName }}</text>
          </view>
          <view class="info-item" v-if="orderInfo.contactName">
            <view class="info-label">
              <u-icon name="user" size="16" color="#666"></u-icon>
              <text>联系人</text>
            </view>
            <text class="info-value">{{ orderInfo.contactName }}</text>
          </view>
          <view class="info-item" v-if="orderInfo.contactPhone">
            <view class="info-label">
              <u-icon name="phone" size="16" color="#666"></u-icon>
              <text>联系电话</text>
            </view>
            <text class="info-value">{{ orderInfo.contactPhone }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 房户信息 -->
    <view class="household-section" v-if="orderInfo && (orderInfo.householdInfo || orderInfo.communityName)">
      <view class="info-card">
        <view class="card-title">房户信息</view>
        <view class="info-list">
          <view class="info-item" v-if="orderInfo.communityName">
            <view class="info-label">
              <u-icon name="home" size="16" color="#666"></u-icon>
              <text>所属社区</text>
            </view>
            <text class="info-value">{{ orderInfo.communityName }}</text>
          </view>
          <view class="info-item" v-if="orderInfo.householdInfo">
            <view class="info-label">
              <u-icon name="map" size="16" color="#666"></u-icon>
              <text>房户地址</text>
            </view>
            <text class="info-value">{{ orderInfo.householdInfo }}</text>
          </view>
          <view class="info-item" v-if="orderInfo.repairAddress">
            <view class="info-label">
              <u-icon name="map-pin" size="16" color="#666"></u-icon>
              <text>维修地址</text>
            </view>
            <text class="info-value">{{ orderInfo.repairAddress }}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 工单详细描述 -->
    <view class="description-section" v-if="orderInfo && orderInfo.description">
      <view class="description-card">
        <view class="card-title">维修描述</view>
        <view class="description-content">
          <text class="description-text">{{ orderInfo.description }}</text>
        </view>
      </view>
    </view>

    <!-- 工单图片 -->
    <view class="images-section" v-if="orderInfo">
      <view class="images-card">
        <view class="card-title">相关图片</view>
        <view class="images-content">
          <AppImagePreview 
            :images="orderInfo.repairImages || []"
            :show-image-info="true"
            empty-text="暂无图片"
            @preview="handleImagePreview"
            @error="handleImageError"
            @load="handleImageLoad"
          />
        </view>
      </view>
    </view>


    <!-- 分配维修人员 -->
    <view class="assign-form-section" v-if="orderInfo && orderInfo.status === 1">
      <view class="form-card">
        <view class="card-title">分配维修人员</view>
        <view class="form-content">
          <!-- 选择维修人员 -->
          <view class="form-item">
            <text class="form-label">维修人员</text>
            <view class="picker-wrapper" @click="handleRepairmanPickerClick">
              <text class="picker-text">{{ selectedRepairman ? selectedRepairman.name : '请选择维修人员' }}</text>
              <u-icon name="arrow-right" size="16" color="#999"></u-icon>
            </view>
          </view>
          
        </view>
      </view>
    </view>

      <!-- 操作按钮 -->
      <view class="action-section">
        <u-button 
          type="primary" 
          text="受理工单" 
          size="large"
          @click="handleAccept"
          :loading="accepting"
          class="action-button"
        />
      </view>
    </view>

    <!-- 工单信息不存在 -->
    <view class="empty-section" v-else>
      <u-empty 
        text="工单信息不存在" 
        description="请检查工单ID是否正确"
        icon="file-text"
      />
    </view>

    <!-- 维修人员选择器 -->
    <u-picker
      v-model:show="showRepairmanPicker"
      :columns="repairmanColumns"
      @confirm="onRepairmanConfirm"
      @cancel="showRepairmanPicker = false"
      title="选择维修人员"
      :immediateChange="true"
      :closeOnClickOverlay="true"
      :defaultIndex="[0]"
    />
    

  </view>
</template>

<script>
import { ref, onMounted } from 'vue'
import { repairWorkApi } from '@/api/repair-work'
import AppImagePreview from '@/components/AppImagePreview.vue'

export default {
  name: 'RepairAccept',
  components: {
    AppImagePreview
  },
  setup() {
    // 响应式数据
    const orderInfo = ref(null)
    const loading = ref(false)
    const error = ref('')
    const accepting = ref(false)
    const showRepairmanPicker = ref(false)
    
    // 维修人员相关
    const selectedRepairman = ref(null)
    const repairmanList = ref([])
    const repairmanColumns = ref([[]])
    const loadingRepairmen = ref(false)

    // 获取维修人员列表
    const loadRepairmenList = async () => {
      try {
        loadingRepairmen.value = true
        console.log('开始获取维修人员列表...')
        
        const response = await repairWorkApi.getRepairmenList()
        console.log('维修人员列表API响应:', response)
        
        if (response.code === 200 && response.data) {
          repairmanList.value = response.data
          console.log('维修人员列表加载成功:', repairmanList.value)
          console.log('维修人员列表长度:', repairmanList.value.length)
          
          // 检查数据格式
          if (repairmanList.value.length > 0) {
            console.log('第一个维修人员数据:', repairmanList.value[0])
          }
          
          // 构建选择器数据 - 尝试多种格式
          const columnData = repairmanList.value.map(repairman => {
            const item = {
              label: repairman.name || repairman.realName || `维修人员${repairman.id}`,
              value: repairman.id,
              text: repairman.name || repairman.realName || `维修人员${repairman.id}`,
              id: repairman.id
            }
            console.log('构建选择器项目:', item)
            return item
          })
          
          repairmanColumns.value = [columnData]
          console.log('维修人员选择器数据构建完成:', repairmanColumns.value)
          console.log('选择器数据长度:', repairmanColumns.value[0].length)
          
          // 验证数据格式
          if (repairmanColumns.value[0].length > 0) {
            console.log('第一个选择器项目:', repairmanColumns.value[0][0])
            console.log('第一个选择器项目的所有属性:', Object.keys(repairmanColumns.value[0][0]))
          }
          
        } else {
          console.error('获取维修人员列表失败:', response.message)
          uni.showToast({
            title: '获取维修人员列表失败',
            icon: 'none'
          })
        }
      } catch (error) {
        console.error('获取维修人员列表异常:', error)
        uni.showToast({
          title: '网络错误，请重试',
          icon: 'none'
        })
      } finally {
        loadingRepairmen.value = false
      }
    }

    // 获取工单详情
    const loadOrderDetail = async (orderId) => {
      try {
        loading.value = true
        error.value = ''
        console.log('开始加载工单详情, ID:', orderId, '类型:', typeof orderId)
        
        // 确保orderId是数字类型
        const numericOrderId = parseInt(orderId)
        if (isNaN(numericOrderId)) {
          throw new Error('工单ID格式不正确: ' + orderId)
        }
        
        console.log('调用API: /api/property/repair-orders/mobile/' + numericOrderId + '/detail')
        
        // 先尝试移动端API
        console.log('开始调用移动端API...')
        let response = await repairWorkApi.getRepairDetail(numericOrderId)
        console.log('工单详情API响应:', response)
        console.log('API响应状态:', response?.code, '数据:', response?.data)
        
        if (response.code === 200 && response.data) {
          orderInfo.value = response.data
          // 如果repairImages是字符串，尝试解析为数组
          if (typeof orderInfo.value.repairImages === 'string') {
            try {
              orderInfo.value.repairImages = JSON.parse(orderInfo.value.repairImages)
              console.log('解析repairImages成功:', orderInfo.value.repairImages)
            } catch (parseError) {
              console.error('解析repairImages失败:', parseError)
              orderInfo.value.repairImages = []
            }
          }
          console.log('工单详情加载成功:', response.data)
          console.log('工单图片数据:', orderInfo.value.repairImages)
          return
        }
        
        // 如果移动端API失败，尝试工作管理API
        console.log('移动端API失败，尝试工作管理API')
        response = await repairWorkApi.getRepairOrderWorkById(numericOrderId)
        console.log('工作管理API响应:', response)
        
        if (response.code === 200 && response.data) {
          orderInfo.value = response.data
          // 如果repairImages是字符串，尝试解析为数组
          if (typeof orderInfo.value.repairImages === 'string') {
            try {
              orderInfo.value.repairImages = JSON.parse(orderInfo.value.repairImages)
              console.log('解析repairImages成功（工作管理API）:', orderInfo.value.repairImages)
            } catch (parseError) {
              console.error('解析repairImages失败（工作管理API）:', parseError)
              orderInfo.value.repairImages = []
            }
          }
          console.log('工单详情加载成功（工作管理API）:', response.data)
          console.log('工单图片数据（工作管理API）:', orderInfo.value.repairImages)
        } else {
          console.error('工单详情响应异常:', response)
          error.value = response.message || '获取工单详情失败'
        }
      } catch (err) {
        console.error('获取工单详情失败:', err)
        console.error('错误详情:', err.message, err.stack)
        error.value = err.message || '获取工单详情失败'
      } finally {
        loading.value = false
      }
    }

    // 重新加载
    const retryLoad = () => {
      try {
        // 使用与onMounted相同的参数获取逻辑
        let orderId = null
        
        // 方式1: 使用getCurrentPages
        const pages = getCurrentPages()
        if (pages && pages.length > 0) {
          const currentPage = pages[pages.length - 1]
          const options = currentPage.options || {}
          orderId = options.id || options.orderId || options.repairOrderId
        }
        
        // 方式2: 从URL中解析参数
        if (!orderId) {
          const urlParams = new URLSearchParams(window.location.hash.split('?')[1] || '')
          orderId = urlParams.get('id')
        }
        
        // 方式3: 从window.location.search获取
        if (!orderId) {
          const searchParams = new URLSearchParams(window.location.search)
          orderId = searchParams.get('id')
        }
        
        if (orderId) {
          loadOrderDetail(orderId)
        } else {
          error.value = '工单ID不存在，无法重新加载'
        }
      } catch (err) {
        console.error('重新加载失败:', err)
        error.value = '重新加载失败: ' + err.message
      }
    }

    // 受理工单
    const handleAccept = async () => {
      if (!orderInfo.value) {
        uni.showToast({ title: '工单信息不存在', icon: 'none' })
        return
      }

      if (!selectedRepairman.value) {
        uni.showToast({ title: '请选择维修人员', icon: 'none' })
        return
      }

      try {
        accepting.value = true
        console.log('开始分配工单:', {
          orderId: orderInfo.value.id,
          repairmanId: selectedRepairman.value.id,
          remark: '工单分配'
        })
        
        // 调用分配工单API
        const response = await repairWorkApi.assignRepairOrder(
          orderInfo.value.id,
          selectedRepairman.value.id,
          '工单分配'
        )
        
        console.log('分配工单API响应:', response)
        
        if (response.code === 200) {
          uni.showToast({ title: '工单分配成功', icon: 'success' })
          
          // 跳转到维修管理列表页面
          setTimeout(() => {
            uni.navigateTo({
              url: '/pages/property-work/repair-management'
            })
          }, 1500)
        } else {
          throw new Error(response.message || '分配失败')
        }
        
      } catch (error) {
        console.error('工单分配失败:', error)
        uni.showToast({ 
          title: error.message || '工单分配失败，请重试', 
          icon: 'none' 
        })
      } finally {
        accepting.value = false
      }
    }

     // 维修人员选择器点击处理
     const handleRepairmanPickerClick = () => {
       console.log('点击维修人员选择器')
       console.log('当前维修人员列表:', repairmanList.value)
       console.log('当前选择器数据:', repairmanColumns.value)
      
      if (!repairmanList.value || repairmanList.value.length === 0) {
        console.log('维修人员列表为空，重新加载...')
        loadRepairmenList().then(() => {
          if (repairmanList.value && repairmanList.value.length > 0) {
            showRepairmanActionSheet()
          } else {
            uni.showToast({
              title: '暂无维修人员数据',
              icon: 'none'
            })
          }
        })
      } else {
        showRepairmanActionSheet()
      }
    }

    // 显示维修人员选择ActionSheet
    const showRepairmanActionSheet = () => {
      console.log('显示维修人员ActionSheet')
      
      if (!repairmanList.value || repairmanList.value.length === 0) {
        uni.showToast({
          title: '暂无维修人员数据',
          icon: 'none'
        })
        return
      }
      
      // 构建ActionSheet选项
      const itemList = repairmanList.value.map(repairman => 
        repairman.name || repairman.realName || `维修人员${repairman.id}`
      )
      
      console.log('ActionSheet选项列表:', itemList)
      
      uni.showActionSheet({
        itemList: itemList,
        success: (res) => {
          console.log('ActionSheet选择结果:', res)
          const selectedIndex = res.tapIndex
          const selectedRepairmanData = repairmanList.value[selectedIndex]
          
          console.log('选中的维修人员数据:', selectedRepairmanData)
          
          if (selectedRepairmanData) {
            selectedRepairman.value = {
              id: selectedRepairmanData.id,
              name: selectedRepairmanData.name || selectedRepairmanData.realName || `维修人员${selectedRepairmanData.id}`,
              ...selectedRepairmanData
            }
            
            console.log('设置选中的维修人员:', selectedRepairman.value)
            
            uni.showToast({
              title: `已选择：${selectedRepairman.value.name}`,
              icon: 'success'
            })
          }
        },
        fail: (err) => {
          console.log('ActionSheet取消或失败:', err)
        }
      })
    }


    // 维修人员选择确认
    const onRepairmanConfirm = (e) => {
      console.log('维修人员选择确认:', e)
      console.log('选择器数据结构:', {
        value: e.value,
        values: e.values,
        indexs: e.indexs,
        label: e.label
      })
      
      try {
        const selectedValue = e.value && e.value[0] ? e.value[0] : null
        console.log('选中的值:', selectedValue)
        console.log('选中值的类型:', typeof selectedValue)
        console.log('选中值的详细内容:', JSON.stringify(selectedValue))
        
        if (!selectedValue) {
          console.error('未选择任何维修人员')
          uni.showToast({
            title: '请选择维修人员',
            icon: 'none'
          })
          return
        }
        
        // 处理选中的值，可能是对象或数字
        let repairmanId = null
        let repairmanName = null
        
        if (typeof selectedValue === 'object' && selectedValue !== null) {
          // 如果是对象，提取id和name
          repairmanId = selectedValue.value || selectedValue.id
          repairmanName = selectedValue.label || selectedValue.name
          console.log('从对象中提取的ID:', repairmanId, '名称:', repairmanName)
        } else {
          // 如果是数字，直接使用
          repairmanId = selectedValue
          console.log('直接使用数字ID:', repairmanId)
        }
        
        if (!repairmanId) {
          console.error('无法获取维修人员ID')
          uni.showToast({
            title: '维修人员ID无效',
            icon: 'none'
          })
          return
        }
        
        // 从维修人员列表中找到对应的完整信息
        // 尝试多种类型匹配
        let repairman = repairmanList.value.find(r => r.id === repairmanId)
        
        if (!repairman) {
          // 尝试字符串匹配
          repairman = repairmanList.value.find(r => String(r.id) === String(repairmanId))
        }
        
        if (!repairman) {
          // 尝试数字匹配
          repairman = repairmanList.value.find(r => Number(r.id) === Number(repairmanId))
        }
        
        console.log('查找条件 - ID:', repairmanId, '类型:', typeof repairmanId)
        console.log('维修人员列表中的ID类型:', repairmanList.value.map(r => ({ id: r.id, type: typeof r.id })))
        console.log('找到的维修人员信息:', repairman)
        
        if (!repairman) {
          console.error('未找到对应的维修人员信息')
          uni.showToast({
            title: '维修人员信息不存在',
            icon: 'none'
          })
          return
        }
        
        selectedRepairman.value = {
          id: repairmanId,
          name: repairmanName || repairman.name || repairman.realName || `维修人员${repairman.id}`,
          ...repairman
        }
        
        console.log('选中的维修人员:', selectedRepairman.value)
        showRepairmanPicker.value = false
        
        uni.showToast({
          title: `已选择：${selectedRepairman.value.name}`,
          icon: 'success'
        })
      } catch (error) {
        console.error('维修人员选择处理失败:', error)
        uni.showToast({
          title: '选择失败，请重试',
          icon: 'none'
        })
      }
    }


    // 获取工单状态文本
    const getStatusText = (status) => {
      const statusMap = {
        1: '待受理',
        2: '已受理',
        3: '维修中',
        4: '已完成',
        5: '已取消'
      }
      return statusMap[status] || '未知状态'
    }

    // 获取工单状态类型
    const getStatusType = (status) => {
      const typeMap = {
        1: 'warning',
        2: 'info',
        3: 'primary',
        4: 'success',
        5: 'error'
      }
      return typeMap[status] || 'info'
    }

    // 获取工单状态描述
    const getStatusDescription = (status) => {
      const descMap = {
        1: '工单已提交，等待受理',
        2: '工单已被受理，等待分配',
        3: '工单已分配，正在维修',
        4: '工单维修完成',
        5: '工单已取消'
      }
      return descMap[status] || '状态描述未知'
    }

    // 获取紧急程度颜色
    const getPriorityColor = (urgencyLevel) => {
      const colorMap = {
        1: '#999999',  // 一般
        2: '#ff9500',  // 紧急
        3: '#ff4757'   // 非常紧急
      }
      return colorMap[urgencyLevel] || '#999999'
    }

    // 格式化时间
    const formatTime = (time) => {
      if (!time) return '--'
      return new Date(time).toLocaleString('zh-CN')
    }

    // 图片预览事件处理
    const handleImagePreview = (data) => {
      console.log('图片预览事件:', data)
      // AppImagePreview组件内部已处理预览逻辑
    }

    // 图片错误事件处理
    const handleImageError = (data) => {
      console.error('图片错误事件:', data)
    }

    // 图片加载事件处理
    const handleImageLoad = (data) => {
      console.log('图片加载事件:', data)
    }

    // 页面加载
    onMounted(() => {
      // 获取页面参数
      try {
        // 在H5环境中，尝试多种方式获取页面参数
        let orderId = null
        let options = {}
        
        // 方式1: 使用getCurrentPages
        const pages = getCurrentPages()
        if (pages && pages.length > 0) {
          const currentPage = pages[pages.length - 1]
          options = currentPage.options || {}
          console.log('getCurrentPages获取的页面参数:', options)
        }
        
        // 方式2: 从URL中解析参数
        const urlParams = new URLSearchParams(window.location.hash.split('?')[1] || '')
        const urlId = urlParams.get('id')
        console.log('URL解析的ID参数:', urlId)
        
        // 方式3: 从window.location.search获取
        const searchParams = new URLSearchParams(window.location.search)
        const searchId = searchParams.get('id')
        console.log('search解析的ID参数:', searchId)
        
        // 优先使用URL中的参数
        orderId = urlId || searchId || options.id || options.orderId || options.repairOrderId
        
        console.log('最终获取的工单ID:', orderId)
        console.log('所有页面参数:', { options, urlId, searchId })
        
        if (orderId) {
          console.log('获取到工单ID:', orderId)
          // 并行加载工单详情和维修人员列表
          Promise.all([
            loadOrderDetail(orderId),
            loadRepairmenList()
          ]).catch(err => {
            console.error('页面初始化失败:', err)
          })
        } else {
          console.error('工单ID不存在，所有参数:', { options, urlId, searchId })
          error.value = '工单ID不存在，请检查页面参数'
        }
      } catch (err) {
        console.error('获取页面参数失败:', err)
        error.value = '页面参数获取失败: ' + err.message
      }
    })

    return {
      orderInfo,
      loading,
      error,
      accepting,
      showRepairmanPicker,
      selectedRepairman,
      repairmanList,
      repairmanColumns,
      loadingRepairmen,
      loadRepairmenList,
      handleRepairmanPickerClick,
      showRepairmanActionSheet,
      handleAccept,
      onRepairmanConfirm,
      getStatusText,
      getStatusType,
      getStatusDescription,
      getPriorityColor,
      formatTime,
      handleImagePreview,
      handleImageError,
      handleImageLoad,
      retryLoad
    }
  }
}
</script>

<style lang="scss" scoped>
.repair-accept-page {
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  padding-bottom: 120rpx;
  box-sizing: border-box;
}

.loading-section,
.error-section,
.empty-section {
  padding: 100rpx 20rpx;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 400rpx;
}

        .status-section,
        .info-section,
        .applicant-section,
        .household-section,
        .description-section,
        .images-section,
        .accept-form-section,
        .assign-form-section {
          padding: 0 20rpx 20rpx;
          width: 100%;
          box-sizing: border-box;
        }

.status-card,
.info-card,
.description-card,
.images-card,
.form-card {
  background: white;
  border-radius: 16rpx;
  padding: 30rpx;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .card-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333;
    margin-bottom: 24rpx;
    padding-bottom: 16rpx;
    border-bottom: 1rpx solid #f0f0f0;
  }
}

.status-card {
  .status-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16rpx;
    
    .status-title {
      font-size: 36rpx;
      font-weight: 600;
      color: #333;
    }
  }
  
  .status-desc {
    font-size: 26rpx;
    color: #666;
    line-height: 1.4;
  }
}

.description-card {
  .description-content {
    .description-text {
      font-size: 26rpx;
      color: #333;
      line-height: 1.6;
      word-break: break-all;
    }
  }
}

        .images-card {
          .images-content {
            width: 100%;
          }
        }

.info-list {
  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16rpx 0;
    border-bottom: 1rpx solid #f8f8f8;
    
    &:last-child {
      border-bottom: none;
    }
    
    .info-label {
      display: flex;
      align-items: center;
      gap: 12rpx;
      flex-shrink: 0;
      width: 160rpx;
      
      text {
        font-size: 26rpx;
        color: #666;
      }
    }
    
    .info-value {
      font-size: 26rpx;
      color: #333;
      text-align: right;
      flex: 1;
      word-break: break-all;
    }
  }
}

.form-content {
  .form-item {
    margin-bottom: 30rpx;
    
    &:last-child {
      margin-bottom: 0;
    }
    
    .form-label {
      display: block;
      font-size: 28rpx;
      color: #333;
      font-weight: 600;
      margin-bottom: 16rpx;
    }
    
    .picker-wrapper {
      background: #f8f9fa;
      border-radius: 8rpx;
      padding: 20rpx;
      display: flex;
      justify-content: space-between;
      align-items: center;
      border: 2rpx solid #e9ecef;
      min-height: 44rpx;
      
      .picker-text {
        font-size: 26rpx;
        color: #333;
        flex: 1;
      }
    }
  }
}

.action-section {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: white;
  padding: 20rpx;
  border-top: 1rpx solid #f0f0f0;
  box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
  box-sizing: border-box;
  
  .action-button {
    width: 100%;
  }
}

        /* 响应式适配 */
        @media screen and (max-width: 375px) {
          .status-section,
          .info-section,
          .applicant-section,
          .household-section,
          .description-section,
          .images-section,
          .accept-form-section,
          .assign-form-section {
            padding: 0 15rpx 15rpx;
          }
  
  .status-card,
  .info-card,
  .description-card,
  .images-card,
  .form-card {
    padding: 20rpx;
  }
  
  .status-card {
    .status-header {
      .status-title {
        font-size: 32rpx;
      }
    }
  }
  
  .images-card {
    .images-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 12rpx;
    }
  }
}

@media screen and (min-width: 769px) {
  .repair-accept-page {
    max-width: 800px;
    margin: 0 auto;
  }
}
</style>
